<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openAdd">{{$t('attendance.add_shift')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" width="80%" top="2.5%" :before-close="closeDia">
      <el-form ref="formData" :model="formData.schedule_setting" :rules="rules" label-position="right" label-width="auto" size="mini">
        <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.time_period_setting')}}</span>
          </div>
          <div style="display:flex">
            <el-form-item :label="$t('table.shift_name')" prop="name">
              <el-input label="right" style="width:200px" type="text" v-model="formData.schedule_setting.name">
              </el-input>
            </el-form-item>
            <el-button type="primary" size="small" style="margin-left:20px;height:32px" @click="addTimePeriod">{{$t('attendance.add_time_period')}}
            </el-button>
          </div>
          <div style="border:1px #eee solid;padding:10px" v-for="(item,index) in formData.period_setting" :key="index">
            <el-row type="flex">
              <el-col :span="6">{{$t('attendance.time_period')}}</el-col>
              <el-col :span="6">{{$t('attendance.check_start_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.work_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.off_work_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.check_out_time')}}</el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row type="flex" v-if="update">

              <el-col :span="6">
                <el-form-item label="" prop="period_name" label-width="0">
                  <el-input label="right" style="width:100px" type="text" v-model="item.name" size="mini">
                  </el-input>
                </el-form-item>

              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.start_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.shift_start_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.shift_end_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm " v-model="item.end_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="4">
                <el-button type="danger" size="small" style="height:32px" @click="deleteTimePeriod(index)">{{$t('attendance.delete_time_period')}}
                </el-button>
              </el-col>
            </el-row>
            <el-row type="flex" v-if="update">
              <el-col :span="6" :offset="3">
                <el-checkbox :label="item.need_clock_on" :value="Boolean(item.need_clock_on)"
                  @change="item.need_clock_on == 1 ? item.need_clock_on=0:item.need_clock_on=1">{{$t('attendance.need_clock_on')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.need_clock_off" :value="Boolean(item.need_clock_off)"
                  @change="item.need_clock_off == 1 ? item.need_clock_off=0:item.need_clock_off=1">{{$t('attendance.need_clock_off')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.late_log" :value="Boolean(item.late_log)" @change="item.late_log == 1 ? item.late_log=0:item.late_log=1">
                  {{$t('attendance.late_log')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.leave_early_log" :value="Boolean(item.leave_early_log)"
                  @change="item.leave_early_log == 1 ? item.leave_early_log=0:item.leave_early_log=1">{{$t('attendance.leave_early_log')}}
                </el-checkbox>
              </el-col>
              <el-col :span="6">
                {{$t('attendance.plan_worktime')}} : <el-input-number size="mini" v-model="item.plan_time"
                  controls-position="right" :min="0" style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.attendance_setting')}}</span>
          </div>
          <div align="center">
            <div style="margin-bottom:10px">
              {{$t('attendance.late_minute')}}<el-input-number size="mini" v-model="formData.schedule_setting.late_minutes" controls-position="right" :min="0"
                style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
            </div>
            <div>
              {{$t('attendance.leave_early_minute')}}<el-input-number size="mini" v-model="formData.schedule_setting.early_minutes" controls-position="right" :min="0"
                style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
            </div>
          </div>
        </el-card> -->
        <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.week_setting')}}</span>
          </div>
          <div>
            <!-- <el-row type="flex" justify="center">
              <el-col :span="3">{{$t('attendance.sun')}}</el-col>
              <el-col :span="3">{{$t('attendance.mon')}}</el-col>
              <el-col :span="3">{{$t('attendance.tue')}}</el-col>
              <el-col :span="3">{{$t('attendance.wed')}}</el-col>
              <el-col :span="3">{{$t('attendance.thur')}}</el-col>
              <el-col :span="3">{{$t('attendance.fir')}}</el-col>
              <el-col :span="3">{{$t('attendance.sat')}}</el-col>
            </el-row> -->
            <el-row type="flex" justify="center">
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Sunday" :value="Boolean(formData.week_setting.Sunday)"
                      @change="formData.week_setting.Sunday == 1 ? formData.week_setting.Sunday=0:formData.week_setting.Sunday=1">
                      {{$t('attendance.sun')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="sunday_pm" :value="Boolean(formData.week_setting.sunday_pm)"
                      @change="formData.week_setting.sunday_pm == 1 ? formData.week_setting.sunday_pm=0:formData.week_setting.sunday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Monday" :value="Boolean(formData.week_setting.Monday)"
                      @change="formData.week_setting.Monday == 1 ? formData.week_setting.Monday=0:formData.week_setting.Monday=1">
                      {{$t('attendance.mon')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="monday_pm" :value="Boolean(formData.week_setting.monday_pm)"
                      @change="formData.week_setting.monday_pm == 1 ? formData.week_setting.monday_pm=0:formData.week_setting.monday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Tuesday" :value="Boolean(formData.week_setting.Tuesday)"
                      @change="formData.week_setting.Tuesday == 1 ? formData.week_setting.Tuesday=0:formData.week_setting.Tuesday=1">
                      {{$t('attendance.tue')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="tuesday_pm" :value="Boolean(formData.week_setting.tuesday_pm)"
                      @change="formData.week_setting.tuesday_pm == 1 ? formData.week_setting.tuesday_pm=0:formData.week_setting.tuesday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Wednesday" :value="Boolean(formData.week_setting.Wednesday)"
                      @change="formData.week_setting.Wednesday == 1 ? formData.week_setting.Wednesday=0:formData.week_setting.Wednesday=1">
                      {{$t('attendance.wed')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="wednesday_pm" :value="Boolean(formData.week_setting.wednesday_pm)"
                      @change="formData.week_setting.wednesday_pm == 1 ? formData.week_setting.wednesday_pm=0:formData.week_setting.wednesday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Tednesday" :value="Boolean(formData.week_setting.Tednesday)"
                      @change="formData.week_setting.Tednesday == 1 ? formData.week_setting.Tednesday=0:formData.week_setting.Tednesday=1">
                      {{$t('attendance.thur')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="thursday_pm" :value="Boolean(formData.week_setting.thursday_pm)"
                      @change="formData.week_setting.thursday_pm == 1 ? formData.week_setting.thursday_pm=0:formData.week_setting.thursday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Friday" :value="Boolean(formData.week_setting.Friday)"
                      @change="formData.week_setting.Friday == 1 ? formData.week_setting.Friday=0:formData.week_setting.Friday=1">
                      {{$t('attendance.fir')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="friday_pm" :value="Boolean(formData.week_setting.friday_pm)"
                      @change="formData.week_setting.friday_pm == 1 ? formData.week_setting.friday_pm=0:formData.week_setting.friday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Saturday" :value="Boolean(formData.week_setting.Saturday)"
                      @change="formData.week_setting.Saturday == 1 ? formData.week_setting.Saturday=0:formData.week_setting.Saturday=1">
                      {{$t('attendance.sat')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="saturday_pm" :value="Boolean(formData.week_setting.saturday_pm)"
                      @change="formData.week_setting.saturday_pm == 1 ? formData.week_setting.saturday_pm=0:formData.week_setting.saturday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-form-item align="right">
          <el-button size="small" @click="closeDia()">{{$t('table.cancel')}}</el-button>
          <el-button type="primary" size="small" @click="submitForm()">{{$t('table.complete')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import {
  add_period,
  add_weekly,
  add_schedule,
} from "@/api/attendance_management/attendanceShift";

export default {
  mounted() {},
  data() {
    return {
      num: 0,
      dialogTableVisible: false,
      update: true,
      schedule_id: null,
      formData: {
        schedule_setting: {
          schedule_id: null,
          name: undefined,
          // late_minutes: 0,
          // early_minutes: 0,
          plan_time:0
        },
        period_setting: [],
        week_setting: {
          schedule_id: null,
          Sunday: 0,
          Monday: 0,
          Tuesday: 0,
          Wednesday: 0,
          Thursday: 0,
          Friday: 0,
          Saturday: 0,
        },
        // week_setting: {
        //   schedule_id: null,
        //   sunday_am: 0,
        //   sunday_pm: 0,
        //   monday_am: 0,
        //   monday_pm: 0,
        //   tuesday_am: 0,
        //   tuesday_pm: 0,
        //   wednesday_am: 0,
        //   wednesday_pm: 0,
        //   thursday_am: 0,
        //   thursday_pm: 0,
        //   friday_am: 0,
        //   friday_pm: 0,
        //   saturday_am: 0,
        //   saturday_pm: 0,
        // },
      },
      time_item: {
        name: null,
        schedule_id: null,
        start_time: null,
        shift_start_time: null,
        shift_end_time: null,
        end_time: 0,
        need_clock_on: 0,
        need_clock_off: 0,
        late_log: 0,
        leave_early_log: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入班次名称", trigger: "blur" }],
      },
      week: [],
    };
  },
  methods: {
    openAdd(row_id) {
      this.dialogTableVisible = true;
      // 赋值班次ID
      this.schedule_id = parseInt(new Date().valueOf() / 1000);
      this.formData.schedule_setting.schedule_id = this.schedule_id;
      this.formData.week_setting.schedule_id = this.schedule_id;
      this.time_item.schedule_id = this.schedule_id;
      console.log(this.schedule_id, "233333333333");

      // 默认自动添加一个时段栏
      this.addTimePeriod();
    },
    submitForm() {
      console.log(this.formData.period_setting, "ffffffffffffffffff");

      this.$refs.formData.validate((valid) => {
        if (!valid) {
          return;
        } else {
          for (let item of this.formData.period_setting) {
            add_period(store.getters.token, item);
          }
          Promise.all([
            add_schedule(store.getters.token, this.formData.schedule_setting),
            add_weekly(store.getters.token, this.formData.week_setting),
          ]).then((res) => {
            let res_msg = null;
            for (let item of res) {
              if (!item.data.status) {
                res_msg = item;
                console.log(res_msg, "res_msg");
                break;
              }
            }
            if (res_msg && res_msg.data.status == false) {
              this.$message.error(this.$t("table.add_fail"));
            } else {
              this.$message.success(this.$t("table.add_complete"));
              this.$emit("getLists");
            }
          });
          this.dialogTableVisible = false;
          this.reset();
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
      this.reset();
    },
    reset() {
      this.formData = {
        schedule_setting: {
          schedule_id: null,
          name: undefined,
          // late_minutes: 0,
          // early_minutes: 0,
          plan_time:0
        },
        period_setting: [],
        week_setting: {
          schedule_id: null,
          Sunday: 0,
          Monday: 0,
          Tuesday: 0,
          Wednesday: 0,
          Thursday: 0,
          Friday: 0,
          Saturday: 0,
        },
      };
    },
    // 新增时段
    addTimePeriod() {
      console.log(this.time_item, "time_item");
      let time_item = JSON.parse(JSON.stringify(this.time_item));
      console.log(time_item, "----------添加");
      this.formData.period_setting.push(time_item);
      console.log(this.formData.period_setting, "ffffffffffffffffffffaaaa");
    },
    // 删除时段
    deleteTimePeriod(index) {
      this.formData.period_setting.splice(index, 1);

      // 这里删除后会导致页面渲染不正确，使用v-if进行局部的强制刷新
      this.update = false;
      this.$nextTick(() => {
        this.update = true;
      });
    },
  },
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;
}
.box-card {
  margin-bottom: 5px;
}
</style>